import React from 'react'
import { Badge, TabBar } from "antd-mobile";
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import style from './css/index.module.css'
  import { useNavigate } from 'react-router-dom';
function Tav() {
    const nav=useNavigate()
    const tabs = [
      {
        key: "home",
        title: "抢票",
        icon: <AppOutline />,
   
      },
      {
        key: "order",
        title: "高铁游",
        icon: <UnorderedListOutline />,
   
      },
      {
        key: "index",
        title: "订单",
        icon: (active) =>
          active ? <MessageFill /> : <MessageOutline />,
  
      },
      {
        key: "my",
        title: "个人中心",
        icon: <UserOutline />,
      },
    ];
  return (
    <div className={style.op}>
      <TabBar onChange={(key=>nav(key))}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default Tav
